
/**
 *
 * 添加标注
 *
 * @param     map           Mars3d实例对象
 * @param     data          标注信息
 * @param     layerOption   配置信息
 * @param     style         html与样式
 * @returns  BQGIS_Mars3DMark
 *
 */

 
let options = {
    map:null,
    data:[],
    layerOption:{},
    style:{
        html:``,
        horizontalOrigin:Cesium.HorizontalOrigin.LEFT,
        verticalOrigin: Cesium.VerticalOrigin.CENTER
    }
}
export function BQGIS_initMars3DMark(option){
    options = Object.assign(options,option)
    return new BQGIS_Mars3DMark(options)
}

function BQGIS_Mars3DMark({map,data,layerOption}){
    this.map = map
    this.divGraphicData = data
    this.graphicLayer = new mars3d.layer.GraphicLayer(layerOption)
    map.addLayer(this.graphicLayer)
}

// 格式化 标注数据
function normalizingData(data){
    let list = []
    if(Array.isArray(data)){
        data.forEach(d=>{
            list.push(d)
        })
    }

    return list
}

// 更新数据 全部更新
BQGIS_Mars3DMark.prototype.update = function update(data) {
    this.divGraphicData = data
    this.drawer()
    return this
}

// 
function bindDivGraphic(data,index){
    let {horizontalOrigin,verticalOrigin,html} = options.style
    const divGraphic = new mars3d.graphic.DivGraphic({
        position: data.position,
        style: {
            ...options.style,
            html:formatterHtml(html,data),
            horizontalOrigin,
            verticalOrigin
        },
        attr: {
            index: index + 1,
            duNum: 0
        }
    })
    // 刷新局部DOM,不影响popup面板的其他控件操作
    // divGraphic.on(mars3d.EventType.postRender, function (event) {
    //     const container = event.container // popup对应的DOM
    //     const graphic = event.target

    //     const oldVal = graphic.attr.duNum

    //     const newVal = Number(mars3d.Util.formatDate(new Date(), "ss")) + graphic.attr.index
    //     if (oldVal !== newVal) {
    //         graphic.attr.duNum = newVal
    //         const temperatureDom = container.querySelector(".temperature")
    //         if (temperatureDom) {
    //         temperatureDom.innerHTML = newVal
    //         }
    //     }
    // })
    return divGraphic
}

function formatterHtml(html,data){
    let res =''
    switch(typeof html){
        case "function":
            res = html(data)
            break;
        case "object":
            if(html.hasOwnProperty("content")){
                // header
                // content
                // footer
                const parseContent = (content)=>{
                    if(typeof content == 'string') return `<span> ${content} </span>`
                    return content.map((c)=>{
                        return `
                            <div class="content-item"> <span> ${c} </span> </div>
                        `
                    })
                }
                res = `
                    <div class="mark-container">
                        <div class="${html.header}"> <span> ${data.name} </span> </div>
                        <div class="mark-content">
                            ${parseContent(obj.content)}
                        </div>
                        ${html.footer || ""}
                    </div>
                ` 
            }
            break;
        case "string":
            res = html
            break;
    }
    return typeof res == 'string' ? res : ""
}

BQGIS_Mars3DMark.prototype.drawer = function drawer(){
    let list = normalizingData(this.divGraphicData)
    let i=0,len = list.length
    this.graphicLayer.clear()
    for(i;i<len;i++){
        this.graphicLayer.addGraphic(bindDivGraphic(list[i],i))
    }
    return this
}

BQGIS_Mars3DMark.prototype.destroyedMars3DMark = function destroyedMars3DMark(){
    this.map = null

    this.graphicLayer.remove()
    this.graphicLayer = null
}